var xhr = new XMLHttpRequest();
var phoneList = document.querySelector('.phone-list')

var data = 'meiyou'
xhr.open("GET", "../json/mi_phones.json");
xhr.send();
xhr.addEventListener('readystatechange', function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var dataX = JSON.parse(xhr.responseText);
        shwoPhones(dataX)
        console.log(dataX)
    }
})

function shwoPhones(data) {
    var html = '';
    data.forEach(element => {
        var str = `<section class="item">
        <div class="figure-img">
            <a href="${element.url}" target="_blank">
                <img src="${element.thumbnail}" alt="${element.title}" >
            </a>
        </div>
        <h3><a href="${element.url}" class="title">${element.title}</a></h3>
        <p class="desc">${element.desc}</p>
        <p class="price"><span>${element.price}</span>元</p>
    </section>`
        html += str
    });
    phoneList.innerHTML = html
}